<template>
  <article class="page bg-default">
    <headerbar :hideBack="true">个人中心</headerbar>

    <section class="frame-content no-bg">

      <section class="">
        <div class="avatar-wrap no-bg">
          <div @click.stop="go('changeAvatar')" class="avatar-img"><img :src="tools.getAvatarUrl(userInfo.id)+'&'+Date.now()" alt="" @click.stop="go('changeAvatar')"></div>

          <div class="cont">
            <div class="title color-default">
              {{userInfo.nickname}}
              <span v-if="partyInfo.userNo">(ID:{{partyInfo.userNo}})</span>
              <div class="float-right">
                <span class="score" @click="go('myScore')"><span class="icon-score"><img src="../../../../static/images/dangjian/mine/icon-score.png"
                                                                  alt=""></span> <i class="number">{{myIntegrals.totalScore?myIntegrals.totalScore:0}}</i></span>
              </div>
            </div>
            <div class="tip group-name">{{userInfo.mainGroupName}}</div>
            <div @click="openBirthdayUrl" v-if="partyInfo.rdsj" class="dang-date">政治生日:{{getTime(partyInfo.rdsj)}}</div>
            <div v-if="!partyInfo.rdsj" class="dang-date">暂无政治生日数据</div>
          </div>
        </div>

        <!--<section class="">
        <ul class="tab noborder">
          <li @click="go('mySubscriptions')" ><span>我的订阅</span></li>
          <li @click="go('myCollection')" ><span>我的收藏</span></li>
          <li @click="go('browseHistory')" ><span>浏览历史</span></li>
        </ul>
        </section>-->
      </section>

      <section class="action-icon-text">
        <div @click="memorabilia()" class="item"><i class="icon"><img src="../../../../static/images/dangjian/mine/my-part.png" alt=""></i>我的支部</div>
        <div @click="go('myScore')" class="item"><i class="icon"><img src="../../../../static/images/dangjian/mine/my-score.png" alt=""></i>我的积分</div>
        <div @click="go('myHonor')" class="item"><i class="icon"><img src="../../../../static/images/dangjian/mine/my-honor.png" alt=""></i>我的荣誉</div>
        <div @click="goMyVideo()" class="item"><i class="icon"><img src="../../../../static/images/dangjian/mine/my-video2.png" alt=""></i>我的播客</div>
        <div @click="go('mySchoolReport')" class="item"><i class="icon"><img src="../../../../static/images/dangjian/mine/my-result.png" alt=""></i>我的学习</div>
        <div @click="goRedCloud()" class="item"><i class="icon"><img src="../../../../static/images/dangjian/mine/my-car.png" alt=""></i>红云超市</div>
      </section>

      <section class="block relative overflow-visible">
        <ul class="list-action">
          <li @click="go('mySubscriptions')">
            <div class="item">
              <i class="img"><img src="../../../../static/images/dangjian/mine/my-focus.png" alt=""></i>
              <span class="text">我的关注</span>
            </div>
          </li>
          <li @click="go('myCollection')">
            <div class="item">
              <i class="img"><img src="../../../../static/images/dangjian/mine/my-collection.png" alt=""></i>
              <span class="text">我的收藏</span>
            </div>
          </li>
          <li @click="go('myCommonQuestion')">
            <div class="item">
              <i class="img"><img src="../../../../static/images/dangjian/mine/my-commonQuestion.png" alt=""></i>
              <span class="text">常见问题</span>
            </div>
          </li>
<!--          <li v-if="getKey==='0'" @click="exchangeRecord">-->
          <li v-if="true" @click="exchangeRecord">
            <div class="item">
              <i class="img"><img src="../../../../static/images/dangjian/mine/my-order.png" alt=""></i>
              <span class="text">兑换记录</span>
            </div>
          </li>
          <li @click="go('browseHistory')">
            <div class="item">
              <i class="img"><img src="../../../../static/images/dangjian/mine/history.png" alt=""></i>
              <span class="text">浏览历史</span>
            </div>
          </li>
          <li @click="goMyVideo()" v-if="false">
            <div class="item">
              <i class="img"><img src="../../../../static/images/dangjian/mine/my-video.png" alt=""></i>
              <span class="text">播客空间</span>
            </div>
          </li>
          <li @click="go('userInfo')">
            <div class="item">
              <i class="img"><img src="../../../../static/images/dangjian/mine/person-info.png" alt=""></i>
              <span class="text">个人信息</span>
            </div>
          </li>
<!--          <li @click="go('partyEducation')">
            <div class="item">
              <i class="img"><img src="../../../../static/images/dangjian/mine/person-info.png" alt=""></i>
              <span class="text">党建教育</span>
            </div>
          </li>-->
          <li @click="go('setting')">
            <div class="item">
              <i class="img"><img src="../../../../static/images/dangjian/mine/setting.png" alt=""></i>
              <span class="text">系统设置</span>
            </div>
          </li>
        </ul>
        <div v-if="false" class="action-tip">这里修改头像、更新版本</div>
      </section>
       <div class="pdv-3"></div>
       <div class="pdv-3"></div>
       <div class="pdv-3"></div>
       <div class="pdv-3"></div>

      <div class="pdv-0"></div>
    </section>
    <footerbar></footerbar>
  </article>
</template>

<script>
  import footerbar from '../../../components/layout/footerbar.vue'
  import moment from 'moment'
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  export default {
    components: {footerbar},
    name: 'personalcenter',
    data () {
      return {
        fn: tools,
        userInfo: {},
        partyInfo: {},
        sysFile: {},
        myIntegrals: {},
        getKey:'1' //判断是否走新页面 1 走老页面 0 新页面
      }
    },
    created () {
      this.getDictValue()
      this.userInfo = this.$localStorage.get('userInfo')
      let pInfo = this.$localStorage.get('partyInfo')
      if (pInfo) {
        this.partyInfo = pInfo
      }
      // this.getFile()
       this.myIntegral()
    },
    methods: {
      goMyVideo () {
        this.$router.push({name: 'microVideo', query: {userId: this.userInfo.id}})
        sessionStorage.setItem("microVideoTab", 0);
      },
      go (path) {
        if (path === 'myScore') {
//          return tools.alert('未开放')
        }
        this.$router.push({path: path})
      },
      //兑换记录
      exchangeRecord() {
        this.$router.push({path: 'mallForRecordList'})
      },
      getTime (createTime) {
        if (!createTime) {
          return ''
        }
        return moment(createTime).format('MM月DD日')
      },
      getFile () {
        let fileId = this.userInfo.photo
        this.fetchService.sysFile(fileId).then(res => {
          if (res.code !== 0) {
            // return tools.tip(res.message)
          }
          this.sysFile = res.data
        })
      },
      myIntegral () {
        let data = {
          userId: this.userInfo.id
        }
        this.fetchService.myIntegral(data.userId).then(res => {
          if (res.code !== 0) {
            // return tools.tip(res.message)
          }
          this.myIntegrals = res.data
        })
      },
      showImg (fileId) {
        let fileUrl = this.tools.getImgUrl(fileId)
        console.log('-------------fileUrl=', fileUrl)
        return fileUrl
      },
      goRedCloud () {
        sessionStorage.setItem("menuIndex",0);
        this.$router.push({name: 'supermarketHome'}) //新超市
        /*let data = {
          catKey: "CAT_MALL_",
          treeKey: "IS_OPEN",
        };
        this.fetchService.dictValue(data).then((res) => {
          console.log("this.fetchService.dictValue", res.data);
          if(res.code !== 0){
            return
          }
          if (res.code === 0 && res.data.length>0) {
            // if(res.data[0].key === '0'){//正常调用
            if(true){//新超市
              sessionStorage.setItem("menuIndex",0);
              this.$router.push({name: 'supermarketHome'}) //新超市
            }else {
              this.$router.push({name: 'superMarket'})//老超市
            }
          }else{
            this.$router.push({name: 'superMarket'})//老超市
          }
        });*/
        // this.$router.push({name: 'superMarket'})
//        return tools.alert('未开放')
      },
      goBranchSpace (id) {
        this.$router.push({path: `/branchSpace/${id}`})
      },
      memorabilia () {
        let userId = this.userInfo.id
        let data = {
          loginId: userId,
          nodeType: '1',
          pageSize: '200'
        }
        this.fetchService.getOrgInfoByUser(data).then(res => {
          if (res.code !== 0) {
            return false
          }
          this.goBranchSpace(res.data.id)
        })
      },
      /**
       * 打开政治生日贺卡
       */
      openBirthdayUrl () {
        console.log('打开政治生日贺卡')
        if (this.partyInfo && this.partyInfo.rdsj  && this.partyInfo.rdsj.length >= 10) {
          let now = new Date()
          let nowStr = moment(now).format('yyyy-MM-dd')
          let nowArr = nowStr.split('-')
          let rdsjArr = this.partyInfo.rdsj.split('-')
          if (nowArr[0] !== rdsjArr[0]) { // 入党时间不是当年
            if (nowArr[1] === rdsjArr[1]) {
              if (nowArr[2] > rdsjArr[2]) { // 生日当月之后弹窗
                let url = this.$store.state.birthdayUrl || 'http://222.85.156.70:8888/zzhk.html?token=' + this.tools.getToken()
                if (window.android && window.android.openUrlAdapt) {
                  window.android.openUrlAdapt(url)
                }
              }
            } else if (nowArr[1] > rdsjArr[1]) { // 生日月份之后弹窗
              let url = this.$store.state.birthdayUrl || 'http://222.85.156.70:8888/zzhk.html?token=' + this.tools.getToken()
              if (window.android && window.android.openUrlAdapt) {
                window.android.openUrlAdapt(url)
              }
            }
          }
        }
      },
      //请求字典值
      getDictValue() {
        let data = {
          catKey: "CAT_MALL_",
          treeKey: "IS_OPEN",
        };
        this.fetchService.dictValue(data).then((res) => {
          if(res.code !== 0){
            return
          }
          if (res.code === 0 && res.data.length>0) {
            this.getKey = res.data[0].key;
            console.log('this.getDict',this.getKey);
          }else{
            this.getKey = '1'
          }
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .block {
    margin:12px;
  }
  .head-bd {
    transform: translateX(-14px);
  }

  .avatar-wrap {
    .avatar-img {
      width:140px;
      height:140px;
    }
    .cont {
      flex:1;
      padding-right:20px;
      .title {
        font-size:18PX;
      }
      .score {
        .number {
          color:#F96037;
        }
      }
    }
  }

  .action-icon-text {
    display:flex;
    justify-content:space-between;
    align-items: center;
    flex-wrap: wrap;
    padding:60px 36px;
    border-radius:15px;
    background:#fff;
    margin:0 12px;
    box-shadow:0px 0px 7px 0px rgba(32,21,18,0.19);
    font-size: $defaultFontSize;
    .item {
      white-space: nowrap;
      width:30%;
      flex-shrink:0;
      display:flex;
      justify-content: flex-start;
      align-items:center;
      margin-bottom:80px;
      &:nth-child(n+4) {
        margin-bottom:0;
      }
      .icon {
        display:block;
        text-align: center;
        height:54px;
        width:58px;
        margin-right:8px;
        img {
          height:100%;
          max-width:100%;
        }
      }
      .text {
        font-size:12PX;
        font-weight:400;
        color:rgba(77,77,77,1);
      }
    }
  }
  .action-tip {
    position:absolute;
    bottom:-70px;
    right:30px;
    background:rgba(248,105,0,1);
    border-radius:25px;
    font-size:15PX;
    padding:12px 48px;
    font-weight:400;
    color:rgba(255,255,255,1);
    opacity:1;
    &::after {
      content:'';
      display:block;
      width:20px;
      height:20px;
      background:rgba(248,105,0,1);
      transform:rotate(45deg);
      position: absolute;
      z-index:2;
      top:-10px;
      right:80px;
    }
  }
  .overflow-visible {
    overflow:visible;
  }
</style>
